<template>
  <div>
    <h1>购物车</h1>
    <div v-if="list.length == 0">
      <h1>还没有商品呐</h1>
    </div>
    <div class="box1" v-if="list.length >= 1">
      <table class="tab">
        <tr>
          <th width="50px"></th>
          <th>图片</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, i) in list" :key="i">
          <td>
            <input
              type="checkbox"
              @click="change(item)"
              v-model="item.check"
              :checked="item.check ? false : true"
            />
          </td>
          <td>
            <img :src="'http://47.115.85.237:3000/' + item.productImg" alt="" />
          </td>
          <td>
            <span>
              {{ item.productName }}
            </span>
          </td>
          <td>￥ {{ item.price }}.00</td>
          <td>
            <button class="td_btn" @click="getnum(0, i)">-</button>
            <input type="text" class="text" v-model="item.num" />
            <button class="td_btn" @click="getnum(1, i)">+</button>
          </td>
          <td class="red">￥{{ item.price * item.num }}.00</td>
          <td @click="del(item)"><span class="el-icon-delete"></span></td>
        </tr>
      </table>

      <div class="bot_box">
        <div class="left">
          <p>
            <input
              type="checkbox"
              v-model="allchecked"
              @change="allclick"
            />全选
          </p>
        </div>
        <div class="right">
          总价: <span class="red">￥{{ totalprice }}</span>
          <button class="js">结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [],
      checklist: [],
      allchecked: false,
    };
  },
  mounted() {
    this.$axios
      .post("/api/user/shoppingCart/getShoppingCart", {
        user_id: this.$store.state.user_id,
      })
      .then((res) => {
        // this.list = res.data.shoppingCartData;
        this.$store.commit("add", res.data.shoppingCartData);
        this.list = this.$store.state.list;
      });
  },
  methods: {
    del(item) {
      console.log(item);
      this.$axios
        .post("/api/user/shoppingCart/deleteShoppingCart", {
          user_id: this.$store.state.user_id,
          product_id: item.productID,
          // num:item.num
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == "001") {
            alert("删除成功");
            this.$axios
              .post("/api/user/shoppingCart/getShoppingCart", {
                user_id: this.$store.state.user_id,
              })
              .then((res) => {
                // this.list = res.data.shoppingCartData;
                this.$store.commit("add", res.data.shoppingCartData);
                this.list = this.$store.state.list;
              });
          }
        });
      this.checklist.forEach((items, index) => {
        if (this.checklist.length == 0) {
          return;
        } else if (items.id == item.id) {
          this.checklist.splice(index, 1);
        } else {
        }
      });
    },
    allclick() {
      this.list.forEach((item) => {
        item.check = this.allchecked;
      });
    },
    change(item) {
      item.check = !item.check;
      // console.log(item);
      console.log(this.list);
      if (item.check == true) {
        this.checklist.push(item);
      } else {
        this.checklist.forEach((items, index) => {
          if (this.checklist.length == 0) {
            return;
          } else if (items.id == item.id) {
            this.checklist.splice(index, 1);
          } else {
          }
        });
      }
      console.log(this.checklist);
      if (this.checklist.length == this.list.length) {
        this.allchecked = true;
      } else {
        this.allchecked = false;
      }
    },
    getnum(p, i) {
      if (p) {
        if (this.list[i].num >= this.list[i].maxNum) {
          this.list[i].num = this.list[i].maxNum;
          alert("已达到最大购买数");
        } else {
          this.list[i].num++;
        }
        // this.$store.commit('num',this.list[i].num)
      } else {
        if (this.list[i].num <= 1) {
          alert("已经不能再减了");
          this.list[i].num == 1;
          return;
        }
        this.list[i].num--;
        // this.$store.commit('num',this.list[i].num)
      }
      this.$axios.post("/api/user/shoppingCart/updateShoppingCart", {
        user_id: this.$store.state.user_id,
        product_id: this.list[i].productID,
        num: this.list[i].num,
      });
      // .then((res) => {
      //   // console.log(res);
      // });
    },
  },
  computed: {
    totalprice() {
      var totalprice = 0;
      this.list.forEach((item) => {
        // totalprice += item.price * item.num;
        if (item.check == true) {
          totalprice += item.price * item.num;
        }
      });
      return totalprice;
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  position: absolute;
  top: 20%;
  left: 10%;
  // background-color: rgb(255, 255, 255);
  height: auto;
  width: 80%;
  .tab {
    background-color: white;
    border-spacing: 0px;
    width: 100%;
    th {
      height: 30px;
      background-color: #a1a1a1;
    }
    td {
      text-align: center;
      line-height: 100px;
      // border-top: 1px solid #f6f6f6;
      border-bottom: 1px solid #cccccc;
      height: 100px;
      .text {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        width: 20px;
        border-left: 0px;
        border-right: 0px;
      }
      .td_btn {
        width: 20px;
        height: 20px;
        border: 0;
      }
    }
    .red {
      color: #c5434d;
    }
    img {
      float: left;
      height: 100%;
    }
  }
}
</style>
